<template>
  <div class="mainContent">
    <!-- //业务变更 -->
    <p style="color:#3a3a3a;margin:auto;width:80%;">费率变更即时生效，功能开通变更我们将在1个工作日内完成审核，审核通过后变更生效。</p>
    <div>
      <a-form
        @submit="handleSubmit"
        style="width:100%;margin:0px auto;"
        :form="form"
      >

        <div >
          <mer-rate :MerRateList="MerRateList" ref="getMerRateData"></mer-rate>
        </div>



        <a-row>
          <a-col :xs="{ span: 24 }" :sm="{ span: 12, offset: 7 }">
            <div style="margin-top:30px;">
              <a-button
                class="submitButton"
                type="primary"
                :loading="iconLoading"
                html-type="submit"
                >提交</a-button
              >
              <a-button
                class="submitButton"
                type="primary"
                @click="gologin"
                style="margin-left:10px"
                >取消</a-button
              >
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </div>
</template>

<script>
import MerRate from "../../../common/MerRate";
export default {
  components: {
    MerRate
  },
  data() {
    return {
      iconLoading: false,
      modalVisible: false,
      spinning: false,
      MerRateList:null,
      transOption: [],
      queryDetail: {},
      smallIdentity: {},
      agent: {},
      bankCard: {},
      member: {},
      upLoadList: {},
      attachRequest: {},
      legalIdentity: {},
      ratelist: [],
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15, offset: 1 },
          md: { span: 15, offset: 1 }
        }
      }
    };
  },
  watch: {},
  computed: {},
  mounted() {
    let memberNo = this.$route.params.id;
    this.goModification(memberNo);
  },
  activated() {},
  methods: {
    gologin() {
      this.$router.push(
        "/OrgRegister/orgInfoQueryDetail/" + this.$route.params.id
      );
      // location.reload();
    },
    goModification(memberNo) {
      this.$axios.get("/agent/business/config/getFeeConfig/" + memberNo).then(
        res => {
          console.log("res", res);
          if (res.data.code == "OK") {
            this.MerRateList = null;
            this.MerRateList = res.data.data;
          
          }else{
            this.$message.error(res.data.message)
          }
        },
        err => {}
      );
    },
   

    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          

          this.$refs.getMerRateData.rateConversion()

          if(this.$refs.getMerRateData.feeTemplateList.length == 0){
            console.log("数组为0")
            return false
          }
          this.$refs.getMerRateData.getTransCodeList()
          // console.log("通过",this.$refs.getMerRateData.feeTemplateList)
          let feeTemplateUpdateRequests = this.$refs.getMerRateData.feeTemplateList
          let DeleteOpenList = []

          feeTemplateUpdateRequests.forEach((item,index) => {
            DeleteOpenList[index] = {
              feeTemplate: item.feeTemplate,
              id: item.id
            }
          })

          let TransCodeList = this.$refs.getMerRateData.TransCodeList
          let merchantProductLimits = []

          TransCodeList.forEach((item,index) => {
            merchantProductLimits[index] = {
              product: item.transLimitCode,
              merchantMemberNo: this.$route.params.id,
              open: item.open
            }
          })

          const data = {
            list: DeleteOpenList,
            merchantProductLimits: merchantProductLimits,
            logMerchantPospUpdateRequest: {
              memberNo: this.$route.params.id
            }
          };
          this.iconLoading = true;
          this.$axios
            .post("/agent/merchant/information/update/config", data)
            .then(
              res => {
                this.iconLoading = false;
                console.log(res);
                if (res.data.code == "OK") {
                  this.$router.replace({ path: "/OrgRegister/orgInfoQuery" });
                } else {
                  this.$message.warning(res.data.message);
                }
              },
              err => {
                this.iconLoading = false;
              }
            );
        }
      });
    },
    checkboxChange(checkedValues) {
      console.log("checked = ", checkedValues);
      this.transOption = checkedValues;
      // console.log("values = ", this.values);
      // let len = checkedValues.length;
      // let checkDatas = [];
      // if (len > 0) {
      //   for (var idx in checkedValues) {

      //     if (checkedValues[idx] != null) {

      //       let data = {
      //         transCode: checkedValues[idx],
      //       };
      //       checkDatas.push(data);
      //     }
      //   }
      //   this.selectOptions = checkDatas;
      // }
      // console.log("this.selectOptions", this.selectOptions);
      // console.log('value = ', this.value)
    }
  }
};
</script>

<style lang="less" scoped>
.card_sty {
  margin-bottom: 30px;
}
/deep/.noExpand {
  .ant-table-row-expand-icon {
    display: none;
  }
}
.mainContent {
  overflow-y: scroll;
  height: 100%;
  padding: 30px;
}

/* 滚动条样式 */
.mainContent::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

span {
  cursor: pointer;
}

.formItemWidth {
  width: 30%;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  margin-top: 15px;
  text-align: left;
  /* margin-left: 20px; */
}

.ant-card-head-title {
  padding: 12px 0 !important;
}

.ant-card-grid {
  padding: 12px;
}

.ant-card-head {
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 24px;
  border-radius: 2px 2px 0 0;
  zoom: 1;
  margin-bottom: -1px;
  min-height: 45px !important;
  font-size: 16px;
  color: #52506b;
  font-weight: 400;
  display: flex;
}

.ant-card .ant-card-grid:nth-child(4n + 1),
.ant-card .ant-card-grid:nth-child(4n + 2) {
  background: #f7f9fc;
}

.ant-card-grid:hover {
  /* box-shadow: none; */
  box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
    1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
}

.modalClass {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 40px;
  padding-bottom: 20px;
}

.modalClass h4 {
  color: #29a576;
  font-size: 22px;
  font-weight: 400;
  margin-top: 15px;
  margin-bottom: 25px;
}

.modalClass p {
  margin-bottom: 10px;
}
.submitButton {
  width: 8vw;
}
</style>
